<template>
	<view class="container">
		<u-navbar :autoBack="true" :title-bold='true' title='设置' :border-bottom='false'> </u-navbar>

		<!-- 	<view class="card" style="margin: 20rpx 0;">
			<view class="left">加我好友，需要我同意</view>
			<view class="right">
				<u-switch v-model="form[0].value" @change='change' :size='40' active-color="#6EC9E1"
					inactive-color="#FFF"></u-switch>
			</view>
		</view> -->

		<view class="card" @click="clearStorage">
			<view class="left">清理缓存</view>
			<view class="right">
				{{storageSize || 0}}
				<u-icon name="arrow-right" color="#c0c4cc" size="24"></u-icon>
			</view>
		</view>

		<!-- 	<view class="card out" @click="show=true">
			退出登录
		</view> -->


		<u-modal v-model="show" :show-cancel-button='true' :mask-close-able="true" content="是否退出登录"
			@confirm='out'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storageSize: '',
				show: false,
				userinfo: {},
				form: [],
				openSelectName: false,
				submitButtonStatus: false,
			}
		},
		onLoad() {
			this.getStorageSize();
			this.userinfo = this.ws.getUserInfo()
			this.pageDataLoad()
		},

		onShow() {
			this.ws.checkNetwork(this)
		},
		watch: {
			form(e) {
				console.log(e);
				// e[0].value = JSON.parse(e[0].value)
			}
		},
		methods: {

			change(e) {
				if (e) {
					this.form[0].value = 1
				} else {
					this.form[0].value = 0
				}
				this.submit()
			},
			submit: function() {

				var that = this
				that.submitButtonStatus = true
				var values = {};
				for (var i = 0; i < that.form.length; i++) {
					if (that.form[i].type == 'select') {
						values[that.form[i].name] = that.form[i].data[that.form[i].value[0]].value
					} else if (that.form[i].type == 'checkbox') {
						var checkboxStr = '';
						for (var y = 0; y < that.form[i].contents.length; y++) {
							checkboxStr += that.form[i].contents[y].checked ? (that.form[i].contents[y].id + ',') : ''
						}
						values[that.form[i].name] = checkboxStr
					} else {
						values[that.form[i].name] = that.form[i].value
					}
				}

				that.ws.pageFun(function() {
					var message = {
						c: 'ImBase',
						a: 'updateUserConfig',
						data: values
					}
					that.ws.send(message);
					that.ws.showMsgCallback = function() {
						setTimeout(function() {
							that.submitButtonStatus = false
						}, 2000)
					}
				}, that)
			},
			openSelect: function(index, name = false) {
				this.form[index].show = true
				this.openSelectName = name ? name : false
			},
			confirmSelect: function(value) {
				var valueIndex = 0,
					data = this.form[value[0].extra].data;
				for (var i = 0; i < data.length; i++) {
					if (data[i].value == value[0].value) {
						valueIndex = i
					}
				}
				this.form[value[0].extra].value = [valueIndex]
			},
			pageDataLoad: function() {
				var that = this
				that.$u.get(that.ws.buildUrl('get-config-item-data', that.userinfo.token), {}).then(res => {
					console.log(res);
					that.loadingShow = false
					//  通用配置
					var general = res.data.imConfigGroup.general.list;
					//  私有配置
					// var privacy = res.data.imConfigGroup.privacy.list;

					for (let g = 0; g < general.length; g++) {

						if (general[g].name == 'send_message_key' || general[g].name == 'ecs_exit') {
							general[g].type = 'hidden'
						}

						if (general[g].type == 'select') {
							general[g].show = false
							general[g].data = []

							for (let i = 0; i < general[g].content.length; i++) {
								general[g].data.push({
									value: i,
									label: general[g].content[i],
									extra: g
								});
								if (parseInt(general[g].value[0]) == i) {
									general[g].value = [i]
								}
							}
						} else if (general[g].type == 'text') {
							general[g].type = 'textarea'
						} else if (general[g].type == 'string') {
							general[g].type = 'text'
						} else if (general[g].type == 'checkbox') {
							var contents = []
							for (var i = 0; i < general[g].content.length; i++) {
								contents.push({
									id: i,
									name: general[g].content[i],
									checked: general[g].value.indexOf(i.toString()) === -1 ? false :
										true
								})
							}
							general[g].contents = contents
						}
					}

					that.form = general
				})
			},

			out() {
				uni.clearStorage()
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			getStorageSize() {
				let that = this;
				uni.getStorageInfo({
					success(res) {
						let size = res.currentSize;
						if (size < 1024) {
							that.storageSize = size + 'B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
						}
					}
				})
			},
			clearStorage() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定清除缓存吗?',
					confirmText: '立即清除',
					success(res) {
						if (res.confirm) {
							uni.clearStorageSync();
							//重新获取并显示清除后的缓存大小
							that.storageSize = '0B';
							uni.showToast({
								title: '清除成功'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #EEE;

		.out {
			margin-top: 20rpx;
			justify-content: center !important;
			color: #6EC9E1;
		}

		.card {
			background-color: #FFF;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 15px;
			border-bottom: 1px solid rgba(240, 240, 240, 0.4);

			.right {
				display: inherit;
				text-align: end;
				color: #878a8f
			}

		}

	}

	page {
		background-color: $--bg-color;
	}

	.form-item-box {
		width: 100vw;
		background-color: $--white;
		padding: 0 5vw;
	}

	.form-item {
		border-bottom: 1px solid red;
	}

	.box20rpx {
		height: 20rpx;
		width: 100vw;
		background-color: $--bg-color;
		margin-left: -5vw;
	}

	.submit-button {
		width: 60vw;
		display: block;
		margin: 40rpx auto;
	}

	.u-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
	}
</style>